<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
		<title>绑定身份证</title>
	</head>
	<link rel="stylesheet" href="font/iconfont.css" />
	<link rel="stylesheet" href="css/css.css" />
	<link rel="stylesheet" href="dist/lib/weui.min.css">
	<link rel="stylesheet" href="dist/css/jquery-weui.min.css">
	<link rel="stylesheet" href="js/layui/css/layui.css" />
	<script type="text/javascript" src="dist/lib/jquery-2.1.4.js" ></script>
	<script src="dist/js/jquery-weui.min.js"></script>
	<script type="text/javascript" src="js/layui/layui.js" ></script>
	<script type="text/javascript" src="dist/lib/fastclick.js"></script>
	<!--<style>
		.weui-switch, .weui-switch-cp__box{ height:22px;}
		.weui-switch-cp__box:before, .weui-switch:before{height: 20px;}
		.weui-switch-cp__box:after, .weui-switch:after {height: 20px;}
		.weui-switch-cp__input:checked~.weui-switch-cp__box, .weui-switch:checked {border-color: #FF6726;background-color: #FF6726;}
		.weui-cell_switch{padding:10px 15px;}
		.weui-slider{padding: 0px 0px 15px !important;}
		.weui-slider__track{background-color: #FF6726;}
		.toolbar, .toolbar .title{font-size:0.75rem;}
		.toolbar .close-select{color: #FF6726;}
		.layui-upload-img{width:100%;overflow:60px;height:100%;/*background: no-repeat 50%;*/background-size: cover;}
		.layui-upload{position: relative;}
		#upload_1,#upload_2,#upload_3,#upload_4{position: absolute;left:0px;top:0px;right:0px;bottom:0px; z-index: 10;}		
		.weui-cells_radio .weui-check:checked+.weui-icon-checked:before{color: #FF6726 !important;}			
	</style>-->
	<body ontouchstart style="background-color:#f7f7f7;" >
		<header class="wy-header" style=" background-color: #fff;">
			<div class="wy-header-icon-back">
				<a href="javascript:history.back(-1)"><i class="iconfont icon-left6"></i></a>
			</div>
			<div class="wy-header-title">绑定信息</div>
		</header>
		<div class="weui-cells user-bangding" style="margin-top:5px;">
			<div class="weui-cell font-sm-color2">姓名：<input type="text" value="宋菲菲" /></div>
			<div class="weui-cell font-sm-color2">身份证：<input type="text" value="410256256232533265" /></div>
			
			<div style="margin: 15px;" class="weui-row">
				<div class="font-sm-color1 weui-col-100">请上传身份证(头像面)截图(如右侧实例)</div>
				<div class="weui-col-50">
					<div class="layui-upload">
						<div class="layui-upload-list">
							<img class="layui-upload-img" id="upload_img1" style="width:80%;" src="dist/demos/images/swiper-1.jpg">
							<p id="Text1" style="display: none;"></p>
						</div>
						<p id="upload_1" style="display: none;"></p>
					</div>
				</div>
				<div class="weui-col-50">
					<div class="layui-upload">
						<div class="layui-upload-list">
						<img class="layui-upload-img" style="width:80%;" src="img/shenfen.png">
					</div>
					</div>
				</div>
			</div>
			
			<div style="margin: 15px;" class="weui-row">
				<div class="font-sm-color1">请上传身份证(头像面)截图(如右侧实例)</div>
				<div class="weui-col-50">
					<div class="layui-upload">
						<div class="layui-upload-list">
							<img class="layui-upload-img" id="upload_img2" style="width:80%;" src="dist/demos/images/swiper-1.jpg">
							<p id="Text2" style="display: none;"></p>
						</div>
						<p id="upload_2" style="display: none;"></p>
					</div>
				</div>
				<div class="weui-col-50">
					<div class="layui-upload">
						<div class="layui-upload-list">
						<img class="layui-upload-img" style="width:80%;" src="img/shenfen.png">
					</div>
					</div>
				</div>
			</div>
		</div>
		<div style="margin: 0px 15px;">
			<button type="submit" class="weui-btn addID_tbn">提交审核</button>
		</div>	
	<script>
		layui.use('upload', function(){
			  var $ = layui.jquery
			  ,upload = layui.upload;
			  
			  //普通图片上传
			  var uploadInst = upload.render({
			    elem: '#upload_1'
			    ,url: '/upload/'
			    ,accept:'images'
			    ,acceptMime: 'image/*'		   //限制上传图片时打开文件夹只能看到图片文件 
			    ,exts: 'jpg|png|gif|bmp|jpeg|.jpg' 
			    ,before: function(obj){
			      //预读本地文件示例，不支持ie8
			      obj.preview(function(index, file, result){
			        $('#upload_img1').attr('src', result); //图片链接（base64）
			      });
			    }
			    ,done: function(res){
			      //如果上传失败
			      if(res.code > 0){
			        return layer.msg('上传失败');
			      }
			      //上传成功
			    }
			    ,error: function(){
			      //演示失败状态，并实现重传
			      var demoText = $('#Text1');
			      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
			      demoText.find('.demo-reload').on('click', function(){
			        uploadInst.upload();
			      });
			    }
			  });
			  
			  //普通图片上传
			  var uploadInst = upload.render({
			    elem: '#upload_2'
			    ,url: '/upload/'
			    ,accept:'images'
			    ,acceptMime: 'image/*'		   //限制上传图片时打开文件夹只能看到图片文件 
			    ,exts: 'jpg|png|gif|bmp|jpeg|.jpg' 
			    ,before: function(obj){
			      //预读本地文件示例，不支持ie8
			      obj.preview(function(index, file, result){
			        $('#upload_img2').attr('src', result); //图片链接（base64）
			      });
			    }
			    ,done: function(res){
			      //如果上传失败
			      if(res.code > 0){
			        return layer.msg('上传失败');
			      }
			      //上传成功
			    }
			    ,error: function(){
			      //演示失败状态，并实现重传
			      var demoText = $('#Text2');
			      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
			      demoText.find('.demo-reload').on('click', function(){
			        uploadInst.upload();
			      });
			    }
			  });
		});
		
		
		$(document).on("click", "#upload_img1", function() {
		    $.actions({
		      title: "选择操作",
		      onClose: function() {
		        console.log("close");
		      },
		      actions: [
		        {
		          text: "相册",
		          className: "color-warning",
		          onClick: function() {
		           $("#upload_1").trigger("click");
		          }
		        }
		      ]
		    });
		  });
		  
		  $(document).on("click", "#upload_img2", function() {
		    $.actions({
		      title: "选择操作",
		      onClose: function() {
		        console.log("close");
		      },
		      actions: [
		        {
		          text: "相册",
		          className: "color-warning",
		          onClick: function() {
		           $("#upload_2").trigger("click");
		          }
		        }
		      ]
		    });
		  });
	</script>	
		

		
	<!--footer-->
	<div class="weui-tabbar">
		<a href="首页.html" class="weui-tabbar__item">
			<div class="weui-tabbar__icon">
				<i class="iconfont icon-home"></i>
			</div>
			<p class="weui-tabbar__label">首页</p>
		</a>
		<a href="商品列表.html" class="weui-tabbar__item">
			<div class="weui-tabbar__icon">
				<i class="iconfont icon-renwu"></i>
			</div>
			<p class="weui-tabbar__label">已接任务</p>
		</a>
		<a href="分类.html" class="weui-tabbar__item">
			<div class="weui-tabbar__icon ">
				<i class="iconfont icon-xinxi2"></i>
			</div>
			<p class="weui-tabbar__label">申诉中心</p>
		</a>
		<a href="分类.html" class="weui-tabbar__item">
			<div class="weui-tabbar__icon ">
				<i class="iconfont icon-huodongzhongxin"></i>
			</div>
			<p class="weui-tabbar__label">活动中心</p>
		</a>
		<a href="个人中心.html" class="weui-tabbar__item weui-bar__item--on">
			<div class="weui-tabbar__icon">
				<i class="iconfont icon-wode2"></i>
			</div>
			<p class="weui-tabbar__label">我的</p>
		</a>
	</div>
		
		
	</body>
</html>